<!-- 提料订单列表 -->
<template>
	<view class="recycleOlder">
		<view class="topBox flex_sb">
			<view class="topItem" :class="{'topItemActive':status == item.v}" v-for="(item,index) in tagList" :key="index"
				@click="tagChange(item.v)">
				{{item.name}}
			</view>
		</view>

		<view class="card mt_120" v-for="(sa,idx) in dataList" :key="idx">
			<view class="head border_bm flex_sb">
				<view class="left flex_j">
					<view class="olderTxt">订单号：{{sa.order_sn}}</view>
				</view>
				<view class="statuTxt" v-if="sa.status != 1">{{sa.status | carryListStatus}}</view>
				<view class="statuTxt" v-else>{{sa.type == 1 ? '待收货' : '待取货'}}</view>
			</view>

			<view class="flex_j border_bm">
				<image src="https://yhf.yjgold.cn//uploads/attach/2024/07/20240704/96d6a1c9ca67b689f2e21520e7d37c82.jpg" mode="aspectFill" class="goodsImg"></image>
				<view class="goodsBox">
					<view class="name">黄金金料</view>
					<view class="greyTxt">提料克重{{sa.weight|| '-'}}g</view>
				</view>
			</view>
			<view class="flex_sb floorBox">
				<view class="infoGrey">{{sa.msg}}</view>
				<view class="confirmBtn flex_c" v-if="sa.status == 1 && sa.type == 1"
					@tap="$util.JumpPath(`/pages/goods/goods_logistics/index?orderId=${sa.order_sn}`)">查看物流</view>
				<view class="confirmBtn flex_c" @click="$util.JumpPath(`/pages/new_gold/goldWarehouse/carryOlderDetail?id=${sa.order_sn}`)">查看订单
				</view>
			</view>
		</view>

		<view class="notTips">
			没有更多数据了！
		</view>

	</view>
</template>

<script>
	import { HTTP_REQUEST_URL } from '@/config/app.js'
	import {
		extractList
	} from '@/api/new_store.js';
	export default {
		data() {
			return {
				HTTP_REQUEST_URL,
				tagList: [{name: '全部', v: 4}, {name: '待发货', v: 0}, {name: '待收货/自提', v: 1}, {name: '已完成', v: 2}, {name: '已关闭', v: 3}],
				status: 4,
				page: 1,
				limit: 10,
				dataList: [],
				finish: false
			}
		},
		onLoad(options) {
			this.status = options.status || 4
		},
		onShow() {
			this.dataList = []
			this.page = 1
			this.finish = false
			this.extractListFc()
		},
		onReachBottom() {
			if(!this.finish) {
				this.page ++
				this.extractListFc()
			}
		},
		onReachBottomDistance: 100,
		methods: {
			tagChange(v) {
				if(this.status == v) return
				this.status = v
				this.dataList = []
				this.page = 1
				this.finish = false
				this.extractListFc()
			},
			extractListFc() {
				let that = this
				let data = {
					'page': that.page,
					'limit': that.limit,
					'status': that.status
				}
				extractList(data).then(res => {
					if (res.status != 200) return
					let arr = res.data
					if(arr.length < this.limit) {
						this.finish = true
					}
					that.dataList.push(...arr)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recycleOlder {
		position: relative;
		width: 100%;
		height: 100%;
		background: #F8F8FA;
		overflow-y: scroll;
		padding-top: 120rpx;
		padding-bottom: 200rpx;
	}

	.topBox {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		padding: 0 36rpx;

		.topItem {
			height: 100rpx;
			position: relative;
			font-size: 32rpx;
			letter-spacing: 0rpx;
			line-height: 100rpx;
			color: rgba(48, 48, 48, 1);
			text-align: center;
		}

		.topItemActive {
			font-size: 32rpx;
			font-weight: 550;
			color: rgba(189, 145, 83, 1);
		}

		.topItemActive::before {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4rpx;
			background: #BD9153;
		}
	}

	.mt_120 {
		margin-top: 120rpx;
	}

	.card {
		width: 702rpx;
		// height: 269rpx;
		background: #FFFFFF;
		margin: 0 auto 12rpx;
		padding: 0 28rpx;

		.head {
			height: 83rpx;
			line-height: 83rpx;

			.olderTxt {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.75rpx;
				color: rgba(115, 115, 115, 1);
				text-align: left;
			}

			.statuTxt {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.75rpx;
				color: rgba(189, 145, 83, 1);
				text-align: right;

			}
		}

		.Title {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: rgba(48, 48, 48, 1);
			text-align: left;

			.grey {
				margin-left: 52rpx;
				color: rgba(102, 102, 117, 1);
			}
		}

		.goodsBox {
			.name {
				font-size: 30rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 43.44rpx;
				color: rgba(48, 48, 48, 1);
				text-align: left;
			}

			.greyTxt {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(102, 102, 117, 1);
				text-align: left;
				margin-top: 8rpx;
			}
		}

		.goodsImg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 16rpx;
			margin: 16rpx 0;
			margin-right: 40rpx;
		}

	}

	.floorBox {
		height: 90rpx;

		.infoGrey {
			flex: 1;
			font-size: 24rpx;
			line-height: 34.75rpx;
			color: rgba(115, 115, 115, 1);
			text-align: left;
		}

		.confirmBtn {
			width: 148rpx;
			height: 59rpx;
			font-size: 28rpx;
			background: #C3A769;
			color: rgba(255, 255, 255, 1);
			border-radius: 6rpx;
			margin-left: 20rpx;
		}
	}

	.border_bm {
		border-bottom: 2rpx solid #F8F8FA;
	}

	.notTips {
		font-size: 24rpx;
		line-height: 34.75rpx;
		text-align: center;
		color: rgba(115, 115, 115, 1);
		margin: 100rpx auto 100rpx;
	}
</style>